<template>
    <a-row>
        <a-col :span="7">
            <a-input-search v-model:value="searchKey" placeholder="请输入数据信息" style="width: 200px; margin-bottom: 10px;"
                @search="onSearch()" />
        </a-col>
    </a-row>

    <a-table :rowKey="(record) => record.id" :row-selection="rowSelection" :dataSource="dataSource" :columns="columns"
        bordered :scroll="{ x: 1000 }" :pagination="false">
        <template #bodyCell="{ column, text, record }">
            {{ text }}
        </template>
    </a-table>
    <AntdZh>
        <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>
</template>
<script setup>
import { ref } from 'vue';
import { queryList } from "@/api/salvage/threadCard";
import useApp from "@/hooks";
const { $, proxy } = useApp();
// const emit = defineEmits(["accidentSelection",]);
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
const total = ref(1)
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
// 定义表格列配置
const columns = [
    {
        title: '地理位置',
        dataIndex: 'geographicalLocation',
        key: 'geographicalLocation',
        width: '20%'
    },
    {
        title: '构造位置',
        dataIndex: 'constructLocation',
        key: 'constructLocation',
        width: '20%'
    },
    {
        title: '地层岩性',
        dataIndex: 'lithology',
        key: 'lithology',
        width: '20%'
    },
    {
        title: '开钻日期',
        dataIndex: 'drillingDate',
        key: 'drillingDate',
        width: '15%'
    },
    {
        title: '完钻日期',
        dataIndex: 'completionDate',
        key: 'completionDate',
        width: '15%'
    },
];

const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        localStorage.setItem("cardUnlockSelection", JSON.stringify(selectedRows));
        // emit("accidentSelection", selectedRows)
    },
    getCheckboxProps: record => ({
        id: record.id,
    }),
};

/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();

/** 搜索按钮操作 */
function onSearch() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = { pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', }
    getList();
}
</script>
  